<template>
  <el-drawer
    ref="drawer"
    :visible="show"
    direction="rtl"
    :title="title"
    :size="size"
    :close-on-press-escape="drawerCloseOnEsc"
    :wrapper-closable="drawerWrapperClosable"
    :before-close="onBeforeClose"
  >
    <div class="edit-drawer-content">
      <el-form ref="dataForm" :model="dataForm" :rules="dataFormRules" size="mini" label-width="80px" />
    </div>

    <div class="edit-drawer-footer">
      <el-button
        v-waves
        class="filter-item"
        plain
        size="mini"
        @click="onBeforeClose"
      >取消
      </el-button>

      <el-button
        v-waves
        class="filter-item"
        size="mini"
        type="primary"
        @click="onSaveData"
      >保存
      </el-button>
    </div>
  </el-drawer>
</template>

<script>
  import waves from '@/directive/waves'
  import formMixin from '@/utils/mixins/formMixin'
  let self
  export default {
    name: '{{ properCase module }}{{ properCase name }}',
    components: {

    },
    directives: {
      waves
    },
    mixins: [formMixin],
    props: {
      show: {
        type: Boolean,
        default: false
      },
      size: {
        type: String,
        default: '50%'
      }
    },
    data() {
      return {
        drawerCloseOnEsc: false,
        drawerWrapperClosable: false,
        title: '',
        dataForm: {
          id: undefined
        },
        dataFormRules: {

        }
      }
    },
    created() {
      self = this
      this.drawerCloseOnEsc = this.$appConfig.drawerCloseOnEsc
      this.drawerWrapperClosable = this.$appConfig.drawerWrapperClosable
      self.loadDependParams()
      self.loadDataInfo()
    },
    methods: {
      onBeforeClose() {
        this.$emit('before-close')
      },
      loadDependParams() {

      },
      loadDataInfo() {

      },
      onSaveData() {
        const dataForm = this.$refs.dataForm
        dataForm.validate((valid) => {
          if (!valid) {
            return
          }

          self.doSaveData()
        })
      },
      doSaveData() {

      }
    }
  }
</script>

<style scoped lang="scss">

</style>
